---
title: Entwickeln und bauen
description: 'Wie du mit der Arbeit an einem neuen Projekt beginnst.'
i18nReady: true
---

import { Tabs, TabItem, FileTree, CardGrid, LinkCard, Steps } from '@astrojs/starlight/components';
import ReadMore from '~/components/ReadMore.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

Sobald du ein Astro-Projekt hast, bist du bereit, mit Astro zu bauen! 🚀

## Bearbeite dein Projekt

Um Änderungen an deinem Projekt vorzunehmen, öffne deinen Projektordner in deinem Code-Editor. Wenn du im Entwicklungsmodus arbeitest und der Entwicklungsserver läuft, kannst du die Aktualisierungen an deiner Website sehen, während du den Code bearbeitest.

Du kannst auch [Aspekte deiner Entwicklungsumgebung anpassen](#konfiguriere-deine-entwicklungsumgebung), z.B. TypeScript konfigurieren oder die offiziellen Astro-Editor-Erweiterungen installieren.

### Starte den Astro-Entwicklungsserver

Astro wird mit einem eingebauten Entwicklungsserver geliefert, der alles hat, was du für die Projektentwicklung brauchst. Mit dem CLI-Befehl `astro dev` wird der lokale Entwicklungsserver gestartet, damit du deine neue Website zum ersten Mal in Aktion sehen kannst.

Jede Startvorlage wird mit einem vorkonfigurierten Skript geliefert, das `astro dev` für dich startet. Nachdem du in dein Projektverzeichnis navigiert hast, verwende deinen bevorzugten Paketmanager, um diesen Befehl auszuführen und den Astro-Entwicklungsserver zu starten.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run dev
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm run dev
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run dev
  ```
  </Fragment>
</PackageManagerTabs>

Wenn alles gut geht, wird Astro dein Projekt jetzt auf [http://localhost:4321/](http://localhost:4321/) bereitstellen. Besuche diesen Link in deinem Browser und sieh dir deine neue Seite an!

### Arbeit im Entwicklungsmodus

Astro achtet auf Live-Datei-Änderungen in deinem `src/`-Verzeichnis und aktualisiert deine Website-Vorschau, während du baust, sodass du den Server nicht neu starten musst, wenn du während der Entwicklung Änderungen vornimmst. Du wirst immer eine aktuelle Version deiner Website in deinem Browser sehen können, wenn der Entwicklungsserver läuft.

Wenn du deine Website im Browser anschaust, hast du Zugriff auf die [Astro-Entwicklungswerkzeugleiste](/de/guides/dev-toolbar/). Sie hilft dir bei der Erstellung, deine [Inseln](/de/concepts/islands/) zu überprüfen, Probleme mit der Barrierefreiheit zu erkennen und vieles mehr.

Wenn du dein Projekt nach dem Starten des Entwicklungsservers nicht im Browser öffnen kannst, gehe zurück zu dem Terminal, in dem du den Befehl `dev` ausgeführt hast, und überprüfe die angezeigte Meldung. Sie sollte dir sagen, ob ein Fehler aufgetreten ist oder ob dein Projekt unter einer anderen URL als [http://localhost:4321/](http://localhost:4321/) bereitgestellt wird.

## Erstelle deine Website und schaue dir eine Vorschau an

Um die Version deiner Website zu überprüfen, die zur Build-Zeit erstellt wird, beende den Entwicklungsserver (<kbd>Strg</kbd> + <kbd>C</kbd>) und führe den entsprechenden Build-Befehl für deinen Paketmanager in deinem Terminal aus:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run build
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm build
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run build
  ```
  </Fragment>
</PackageManagerTabs>

Astro erstellt eine einsatzbereite Version deiner Website in einem separaten Ordner (standardmäßig `dist/`) und du kannst den Fortschritt im Terminal beobachten. So wirst du auf Fehler in deinem Projekt aufmerksam gemacht, bevor du es in die Produktion überführst. Wenn TypeScript auf `strict` oder `strictest` konfiguriert ist, prüft das `build`-Skript dein Projekt auch auf Typfehler.

Wenn der Build abgeschlossen ist, führst du den entsprechenden `preview`-Befehl (z.B. `npm run preview`) in deinem Terminal aus und du kannst die gebaute Version deiner Website lokal im gleichen Browser-Vorschaufenster ansehen.

Beachte, dass dies eine Vorschau deines Codes ist, wie er zum Zeitpunkt der letzten Ausführung des Build-Befehls vorlag. Dies soll dir eine Vorschau darauf geben, wie deine Website aussehen wird, wenn sie ins Netz gestellt wird. Spätere Änderungen, die du nach der Erstellung an deinem Code vornimmst, werden **nicht** in der Vorschau angezeigt, bis du den Build-Befehl erneut ausführst.

Benutze (<kbd>Strg</kbd> + <kbd>C</kbd>), um die Vorschau zu beenden und einen anderen Terminal-Befehl auszuführen, wie z.B. den Entwicklungsserver neu zu starten, um wieder in den [Entwicklungsmodus](#arbeit-im-entwicklungsmodus) zu wechseln, der sich während der Bearbeitung aktualisiert und eine Live-Vorschau deiner Code-Änderungen zeigt.

<ReadMore>Lies mehr über [die Astro CLI](/de/reference/cli-reference/) und die Terminalbefehle, die du beim Bauen mit Astro verwenden wirst.</ReadMore>

:::tip 
Vielleicht möchtest du [deine neue Website sofort bereitstellen](/de/guides/deploy/), bevor du zu viel Code hinzufügst oder änderst. Das ist hilfreich, um eine minimale, funktionierende Version deiner Website zu veröffentlichen und kann dir später viel Zeit und Mühe bei der Fehlersuche ersparen.
:::

## Nächste Schritte

Erfolg! Du bist jetzt bereit, mit Astro zu bauen! 🥳

Hier sind ein paar Dinge, die wir empfehlen, als nächstes zu erforschen. Du kannst sie in beliebiger Reihenfolge lesen. Du kannst unsere Dokumentation auch für eine Weile verlassen und in der Codebasis deines neuen Astro-Projekts spielen und hierher zurückkommen, wenn du Probleme oder Fragen hast.

### Konfiguriere deine Entwicklungsumgebung

Erkunde die folgenden Leitfäden, um deine Entwicklungserfahrung anzupassen.

<CardGrid>
  <LinkCard
    title="Editor-Einrichtung"
    description="Passe deinen Code-Editor an, um das Astro-Entwicklererlebnis zu verbessern und neue Funktionen freizuschalten."
    href="/de/editor-setup/"
  />
  <LinkCard
    title="Entwicklungswerkzeugleiste"
    description="Entdecke die hilfreichen Funktionen der Entwicklungswerkzeugleiste."
    href="/de/guides/dev-toolbar/"
  />
  <LinkCard
    title="TypeScript Konfiguration"
    description="Konfiguriere Optionen für die Typprüfung, IntelliSense und mehr."
    href="/de/guides/typescript/"
  />
</CardGrid>

### Entdecke Astros Funktionen

<CardGrid>
  <LinkCard
    title="Verstehe deine Codebasis"
    description="Erfahre mehr über die Dateistruktur von Astro in unserem Leitfaden zur Projektstruktur."
    href="/de/basics/project-structure/"
  />
  <LinkCard
    title="Inhaltssammlungen erstellen"
    description="Füge Inhalte zu deiner neuen Website mit Frontmatter-Validierung und automatischer Typensicherheit hinzu."
    href="/de/guides/content-collections/"
  />
    <LinkCard
    title="Ansichtsübergänge hinzufügen"
    description="Nahtlose Seitenübergänge und Animationen erstellen."
    href="/de/guides/view-transitions/"
  />
  <LinkCard
    title="Erfahre mehr über Inseln"
    description="Lies über die Architektur der Astro-Inseln."
    href="/de/concepts/islands/"
  />
</CardGrid>

### Nimm am Einführungs-Tutorial teil

In unserem [Einführungs-Tutorial](/de/tutorial/0-introduction/) erstellst du einen voll funktionsfähigen Astro-Blog, der mit einer einzigen leeren Seite beginnt.

Dies ist ein großartiger Weg, um zu erfahren, wie Astro funktioniert und du lernst die Grundlagen von Seiten, Layouts, Komponenten, Routing, Inseln und mehr kennen. Für diejenigen, die noch keine Erfahrung mit Webentwicklungskonzepten haben, gibt es außerdem eine optionale, einsteigerfreundliche Einheit, die dich durch die Installation der notwendigen Anwendungen auf deinem Computer, die Erstellung eines GitHub-Kontos und die Bereitstellung deiner Website führt.
